<template>
  <div class="cards">
    <h5 class="page-title" v-if="filteredStatsCards.length">经营渠道</h5>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="6" v-for="(card, index) in filteredStatsCards" :key="card.id"
        @click="toRouter(card._routeMapIndex)">
        <ArtStatsCard :icon="card.icon" :title="card.title" :description="card.description" :iconSize="card.iconSize"
          iconColor="#fff" :iconBgColor="card.iconBgColor" :showArrow="card.showArrow" :img="card.img" />
      </el-col>
    </el-row>
    <h5 class="page-title" v-if="filteredStatsCardsTwo.length">引流拉新</h5>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="6" v-for="(card, idx) in filteredStatsCardsTwo" :key="card.id"
        @click="tofenxiao(card._fenxiaoIndex)">
        <ArtStatsCard :icon="card.icon" :title="card.title" :description="card.description" :iconSize="card.iconSize"
          iconColor="#fff" :iconBgColor="card.iconBgColor" :showArrow="card.showArrow" :img="card.img" />
      </el-col>
    </el-row>
    <h5 class="page-title" v-if="filteredStatsCardsThree.length">营销推广</h5>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="6" v-for="card in filteredStatsCardsThree" :key="card.id"
        @click="toyouhuiquan(card.id)">
        <ArtStatsCard :icon="card.icon" :title="card.title" :description="card.description" :iconSize="card.iconSize"
          iconColor="#fff" :iconBgColor="card.iconBgColor" :showArrow="card.showArrow" :img="card.img" />
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/store/modules/user'
import { useRouter } from 'vue-router'
import { computed } from 'vue'

const userStore = useUserStore()
const roleIds = computed(() => userStore.roleIds)
const router = useRouter()

// 经营渠道权限ID与索引对应
const statsRouteMap = [
  { roleId: '1121', path: '/dashboard/ecommerce/channel_wx' },
  { roleId: '1122', path: '/dashboard/ecommerce/applet_wx' },
  { roleId: '1123', path: '/dashboard/ecommerce/channel_pc' }
]
const statsCards = [
  {
    id: 1,
    title: '微信小程序',
    count: 1235,
    description: '一键生成小程序，让学员刷题更加方便快捷',
    icon: '&#xe7f3;',
    img: 'https://image.lutongjiakao.com/system/3efca0b8dd2449fcba77417f05ab8a8a.png',
    iconColor: 'rgb(var(--art-warning))',
    iconSize: 20,
    iconBgColor: 'rgb(var(--art-success))',
    textColor: 'rgb(var(--art-primary))',
    backgroundColor: 'rgb(var(--art-bg-primary))',
    showArrow: false
  },
  {
    id: 2,
    title: '微信公众号',
    count: 5000,
    description: '支持一键生成公众号，快速生成H5页面',
    icon: '&#xe812;',
    img: 'https://image.lutongjiakao.com/system/5ce1f2a1634e42f08d7367b82f8eecdf.png',
    iconColor: 'rgb(var(--art-primary))',
    iconSize: 20,
    iconBgColor: 'rgb(var(--art-info))',
    textColor: 'rgb(var(--art-primary))',
    backgroundColor: 'rgb(var(--art-bg-primary))',
    showArrow: false
  },
  {
    id: 3,
    title: 'PC电脑端',
    count: 5000,
    description: '深度还原正式考试电脑操作界面，考前更安心',
    icon: '&#xe742;',
    img: 'https://image.lutongjiakao.com/system/f5055dcd06604696abd4b6e007cfafec.png',
    iconColor: 'rgb(var(--art-error))',
    iconSize: 20,
    iconBgColor: 'rgb(var(--art-error))',
    textColor: 'rgb(var(--art-error))',
    backgroundColor: 'rgb(var(--art-bg-error))',
    showArrow: false
  }
]

// 引流拉新权限ID与下标对应
const fenxiaoPermissionIds = ['1521', '154', '155','1521']
const statsCards_two = [
  {
    id: 4,
    title: '分销推广',
    count: 1235,
    description: '全民推广裂变，快速拓展学员',
    icon: '&#xe812;',
    img: 'https://image.lutongjiakao.com/system/f676d305e8674f7fb7229e3a1706e88b.png',
    iconColor: 'rgb(var(--art-secondary))',
    iconSize: 20,
    iconBgColor: 'rgb(var(--art-secondary))',
    textColor: 'rgb(var(--art-secondary))',
    backgroundColor: 'rgb(var(--art-bg-secondary))',
    showArrow: false
  },
  {
    id: 5,
    title: '老带新',
    count: 5000,
    description: '老客带新客，让市场招生更简单',
    icon: '&#xe724;',
    img: 'https://image.lutongjiakao.com/system/0eadde43cbec4c0ab7e0747f812ccf36.png',
    iconColor: 'rgb(var(--art-warning))',
    iconSize: 20,
    iconBgColor: 'rgb(var(--art-warning))',
    textColor: 'rgb(var(--art-warning))',
    backgroundColor: 'rgb(var(--art-bg-warning))',
    showArrow: false
  },
  {
    id: 6,
    title: '新客专享',
    count: 5000,
    description: '新学员专享，立即转化成交',
    icon: '&#xe724;',
    img: 'https://image.lutongjiakao.com/system/443775df9e5a4c79ab1e0b8dd8fcddb0.png',
    iconColor: 'rgb(var(--art-warning))',
    iconSize: 20,
    iconBgColor: 'rgb(var(--art-warning))',
    textColor: 'rgb(var(--art-warning))',
    backgroundColor: 'rgb(var(--art-bg-warning))',
    showArrow: false
  },
  {
    id: 7,
    title: '链动裂变2+1',
    count: 1235,
    description: '全民推广裂变，快速拓展推广团队',
    icon: '&#xe812;',
    img: 'https://image.lutongjiakao.com/system/f676d305e8674f7fb7229e3a1706e88b.png',
    iconColor: 'rgb(var(--art-secondary))',
    iconSize: 20,
    iconBgColor: 'rgb(var(--art-secondary))',
    textColor: 'rgb(var(--art-secondary))',
    backgroundColor: 'rgb(var(--art-bg-secondary))',
    showArrow: false
  }
]

// 营销推广模块ID和权限ID映射
const statsCards_three_routeMap: Record<number, { roleId: string; path: string }> = {
  7: { roleId: '1731', path: '/user_student/member/ArticleList' },
  8: { roleId: '1531', path: '/result/coupon/coupon1' },
  9: { roleId: '1733', path: '/user_student/member/RedemptionCode' },
  10: { roleId: '156', path: '/result/flashSaleEvent' },
  11: { roleId: '156', path: '/result/live_course' },
  15: { roleId: '156', path: '/result/formList' }
}
const statsCards_three = [
  {
    id: 7,
    title: '会员VIP',
    count: 1235,
    description: '丰富会员权益，提升学员粘性',
    icon: '&#xe84e;',
    img: 'https://image.lutongjiakao.com/system/e0af540dc26d4a548355ba5a07eda1d0.png',
    iconColor: 'rgb(var(--art-primary))',
    iconSize: 20,
    iconBgColor: 'rgb(var(--art-info))',
    textColor: 'rgb(var(--art-primary))',
    backgroundColor: 'rgb(var(--art-bg-primary))',
    showArrow: false
  },
  {
    id: 8,
    title: '优惠券',
    count: 1235,
    description: '循环/阶梯满减/折，提升客单促消费',
    icon: '&#xe84b;',
    img: 'https://image.lutongjiakao.com/system/2e71dc5540df415da5c359f078e3a065.png',
    iconColor: 'rgb(var(--art-secondary))',
    iconSize: 20,
    iconBgColor: 'rgb(var(--art-secondary))',
    textColor: 'rgb(var(--art-secondary))',
    backgroundColor: 'rgb(var(--art-bg-secondary))',
    showArrow: false
  },
  {
    id: 9,
    title: '兑换码',
    count: 1235,
    description: '引流促销，打造口碑产品',
    icon: '&#xe84b;',
    img: 'https://image.lutongjiakao.com/system/4bc33401b91e4274af97d226c805dc85.png',
    iconColor: 'rgb(var(--art-secondary))',
    iconSize: 20,
    iconBgColor: 'rgb(var(--art-secondary))',
    textColor: 'rgb(var(--art-secondary))',
    backgroundColor: 'rgb(var(--art-bg-secondary))',
    showArrow: false
  },
  {
    id: 10,
    title: '秒杀活动',
    count: 1235,
    description: '低价、限购，吸引更多会员',
    icon: '&#xe84b;',
    img: 'https://image.lutongjiakao.com/system/8e7aef93ce0e42929d74df9bf7a044f8.png',
    iconColor: 'rgb(var(--art-secondary))',
    iconSize: 20,
    iconBgColor: 'rgb(var(--art-secondary))',
    textColor: 'rgb(var(--art-secondary))',
    backgroundColor: 'rgb(var(--art-bg-secondary))',
    showArrow: false
  },
  {
    id: 11,
    title: '直播课程',
    count: 5000,
    description: '实时视频互动，直播讲题吸引学员',
    icon: '&#xe7a7;',
    img: 'https://image.lutongjiakao.com/system/d64f9a401e64439e91199fe225e03730.png',
    iconColor: 'rgb(var(--art-warning))',
    iconSize: 20,
    iconBgColor: 'rgb(var(--art-success))',
    textColor: 'rgb(var(--art-warning))',
    backgroundColor: 'rgb(var(--art-bg-warning))',
    showArrow: false
  },
  {
    id: 12,
    title: '社区管理',
    count: 5000,
    description: '活跃社群有妙招，接龙下单促成交',
    icon: '&#xe8ae;',
    img: 'https://image.lutongjiakao.com/system/9de8952aaf104a73bb79db4ee763d885.png',
    iconColor: 'rgb(var(--art-warning))',
    iconSize: 20,
    iconBgColor: 'rgb(var(--art-success))',
    textColor: 'rgb(var(--art-warning))',
    backgroundColor: 'rgb(var(--art-bg-warning))',
    showArrow: false
  },
  {
    id: 13,
    title: '陪练服务',
    count: 5000,
    description: '刷题陪练，让学员刷题更有趣',
    icon: '&#xe84e;',
    img: 'https://image.lutongjiakao.com/system/1d396024889046a38bfc9e78831524f3.png',
    iconColor: 'rgb(var(--art-warning))',
    iconSize: 20,
    iconBgColor: 'rgb(var(--art-success))',
    textColor: 'rgb(var(--art-warning))',
    backgroundColor: 'rgb(var(--art-bg-warning))',
    showArrow: false
  },
  {
    id: 14,
    title: '精选商城',
    count: 5000,
    description: '线上、线下联动，开拓多场景交易',
    icon: '&#xe731;',
    img: 'https://image.lutongjiakao.com/system/3a56bb34539d4885972e9dcb62603e9c.png',
    iconColor: 'rgb(var(--art-warning))',
    iconSize: 20,
    iconBgColor: 'rgb(var(--art-success))',
    textColor: 'rgb(var(--art-warning))',
    backgroundColor: 'rgb(var(--art-bg-warning))',
    showArrow: false
  },
  // {
  //   id: 15,
  //   title: '表单',
  //   count: 5000,
  //   description: '快速发起问卷调研',
  //   icon: '&#xe731;',
  //   img: 'https://image.lutongjiakao.com/system/3a56bb34539d4885972e9dcb62603e9c.png',
  //   iconColor: 'rgb(var(--art-warning))',
  //   iconSize: 20,
  //   iconBgColor: 'rgb(var(--art-success))',
  //   textColor: 'rgb(var(--art-warning))',
  //   backgroundColor: 'rgb(var(--art-bg-warning))',
  //   showArrow: false
  // }
]

const filteredStatsCards = computed(() => {
  return statsCards
    .map((card, idx) => ({
      ...card,
      _routeMapIndex: idx,
      _roleId: statsRouteMap[idx]?.roleId
    }))
    .filter(card =>
      card._roleId && roleIds.value.includes(card._roleId)
    )
})

const filteredStatsCardsTwo = computed(() => {
  return statsCards_two
    .map((card, idx) => ({
      ...card,
      _fenxiaoIndex: idx,
      _roleId: fenxiaoPermissionIds[idx]
    }))
    .filter(card =>
      card._roleId && roleIds.value.includes(card._roleId)
    )
})

const filteredStatsCardsThree = computed(() => {
  return statsCards_three.filter(card => {
    const auth = statsCards_three_routeMap[card.id]
    if (auth) {
      // 需要权限
      return roleIds.value.includes(auth.roleId)
    } else {
      // 11,12,13,14 默认展示
      return true
    }
  })
})

const toRouter = (index: number) => {
  const routeMap = statsRouteMap
  const item = routeMap[index]
  if (item && roleIds.value.includes(item.roleId)) {
    router.push({ path: item.path })
  } else {
    ElMessage.warning('您没有权限访问该页面')
  }
}
const tofenxiao = (id: number) => {
  switch (id) {
    case 0:
      if (roleIds.value.includes('1521')) {
        router.push('/result/distributioncenter/distributioncenter_overview')
      } else {
        ElMessage.warning('您没有权限访问该页面')
      }
      break
    case 1:
      if (roleIds.value.includes('154')) {
        router.push({ path: '/result/mentoringNewcomers' })
      } else {
        ElMessage.warning('您没有权限访问该页面')
      }
      break
    case 2:
      if (roleIds.value.includes('155')) {
        router.push({ path: '/result/newCustomVip' })
      } else {
        ElMessage.warning('您没有权限访问该页面')
      }
      break
    case 3:
      if (roleIds.value.includes('1521')) {
        router.push('/result/distributioncenter/distributioncenter_setting')
      } else {
        ElMessage.warning('您没有权限访问该页面')
      }
      break
  }
}
const toyouhuiquan = (id: number) => {
  const routeMap: Record<number, { roleId: string; path: string }> = {
    7: { roleId: '1731', path: '/user_student/member/ArticleList' },
    8: { roleId: '1531', path: '/result/coupon/coupon1' },
    9: { roleId: '1733', path: '/user_student/member/RedemptionCode' },
    10: { roleId: '156', path: '/result/flashSaleEvent' },
    11: { roleId: '156', path: '/result/live_course' },
    15: { roleId: '156', path: '/result/formList' },
  }
  const item = routeMap[id]
  if (item) {
    if (roleIds.value.includes(item.roleId)) {
      router.push(item.path)
    } else {
      ElMessage.warning('您没有权限访问该页面')
    }
  } else {
    ElMessage({
      message: '正在开发中，敬请期待！',
      type: 'primary'
    })
  }
}
</script>

<style lang="scss" scoped>
.cards {
  padding: 20px 0;

  .page-title {
    margin: 20px 0 15px;
    font-size: 22px;
    font-weight: 500;

    &:first-child {
      margin-top: 0;
    }
  }

  .el-col {
    margin-bottom: 20px;
  }
}
</style>
